<template>
  <div class="dayPlan">
  	<div class="itemList">
  		<div class="list-item" v-for="item,i in waterList" :key="i">
  			<p class="item-text">饮水推荐</p>
  			<div class="img-title">
  				<div class="title-img-model">
  					<img class="title-img" :src="item.waterLogo">
  				</div>
  				<div class="title-con-model">
	  				<span class="title-text" @click="outerLink(item.waterOuterChain)">{{item.waterName}}</span>
	  				<span class="title-description">{{item.waterDescription}}</span>
  				</div>
  			</div>
  			<p class="item-con">
  				{{item.waterContent}}
  			</p>
  		</div>
  	</div>
  </div>
</template>

<script>
import URL from "@/until/urlConfig.js"
export default {
  name: 'dayPlan',
  components: {
  },
  data(){
    return{
      waterList:[]
    }
  },
  created(){
    this.getPlan();
  },
  methods: {
    getPlan(){
      this.$http.get(URL.getRecommend)
      .then(res => {
        // console.log(res);
        this.waterList = res.data;
      })
    },
    outerLink(link){
      window.open(link);
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../style/public.scss";
	.dayPlan{
		padding:rem(10) rem(40) rem(10);
		.itemList{
			.list-item{
				margin-bottom:rem(30);
				padding:rem(30) rem(38);
				box-shadow: 0 0 rem(20) 0 rgba(0,0,0,.1);
				border-radius:rem(18);
				.item-text{
					text-align:left;
					font-size:rem(32);
					color:#474747;
					margin-bottom:rem(12);
				}
				.img-title{
					display:flex;
					margin-bottom:rem(10);
					.title-img-model{
            display: flex;
            align-items: center;
						margin-right:rem(26);
						.title-img{
							height:rem(86);
							width:rem(83);
						}
					}
					.title-con-model{
						display: flex;
						flex-direction: column;
						text-align:left;
						.title-text{
							margin-bottom:rem(8);
							font-size:rem(32);
							color:#474747;
						}
						.title-description{
							font-size:rem(28);
							color:#a4a4a4;
						}
					}
				}
				.item-con{
					font-size:rem(24);
					color:#a4a4a4;
					text-align:left;
				}
			}
		}
	}
</style>
